<template>
  <div class="find-music">
    <!-- 导航 -->
    <div class="find-music-wrap">
      <ul>
        <li 
          class="spec" 
          v-for="item,index in routerArr" :key="index"
          @click="toOtherPage(item.path,item.name,index)"
        >
          <p :class="commentHLIndex == index ? 'active' : ''">{{item.text}}</p>
          <!-- R图标 -->
          <span v-show="index == 2"></span>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "find-music",
  data(){
    return{
      // 保存当前高亮的导航，防止刷新的时候重置--------------并没有解决（后面再说）
      commentHLIndex:0,
      routerArr:[
        {text:'推荐',path:'/find-music/recommend',name:'recommend'},
        {text:'排行榜',path:'/find-music/list',name:'list'},
        {text:'歌单',path:'/find-music/playlist',name:'playlist'},
        {text:'主播电台',path:'/find-music/dj-radio',name:'dj-radio'},
        {text:'歌手',path:'/find-music/singers',name:'singers'},
        {text:'新碟上架',path:'/find-music/new-disc',name:'new-disc'},
      ]
    }
  },
  methods:{
    // 跳转页面
    toOtherPage(path,name,index){
      this.$router.push({path,name})
      this.commentHLIndex = index
    }
  }
};
</script>

<style scoped lang="scss">
.find-music {
  width: 100%;
  // 顶部导航
  .find-music-wrap {
    width: 100%;
    background-color: #c20c0c;
    height: 34px;
    ul {
      width: 1100px;
      margin: 0 auto;
      color: #fff;
      font-size: 12px;
      width: 744px;
      li {
        float: left;
        width: 84px;
        margin-left: 2px;
        margin-right: 6px;
        text-align: center;
        cursor: pointer;
        &:hover {
          p {
            background-color: #9b0909;
          }
        }
        p {
          display: inline-block;
          height: 20px;
          padding: 0 13px;
          line-height: 20px;
          margin: 7px auto;
          border-radius: 20px;
          text-align: center;
          // 激活背景
          &.active {
            background-color: #9b0909;
          }
        }
      }
      .spec {
        position: relative;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          position: absolute;
          top: 9px;
          left: 54px;
          background: url("@/assets/white-r-icon@3x.png") no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
</style>